<template>
	<view class="route-recommend">
		<u-sticky bgColor="#fff">
			<u-tabs :current="currentActive" lineColor="#ED2920" :list="tabList" @change="handleChageTab"></u-tabs>

		</u-sticky>
		<view class="inner">
			<view class="have" v-if="dataList.length">
				<view class="item" v-for="(item,index) in dataList" :key="index">
					<view class="left">
						<view class="logo">
							<image class="img" mode="aspectFill" :src="item.logo"></image>
						</view>
						<view class="name">
							{{item.nickname}}
						</view>
					</view>
					<view class="right">
						{{timeForMat(item.create_time)}}
					</view>
				</view>
				<u-loadmore :status="loadStatus" />
			</view>
			<view class="none" v-else>
				<u-empty mode="data">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import handleCache from "@/utils/cache.js"
	import {
		ref,
		computed
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		commonApi
	} from '@/api/index.js'
	const userInfo = ref('')
	const currentActive = ref(0)
	const currentPage = ref(1)
	const loadStatus = ref('loadmore')
	const totalPage = ref(0)
	const tabList = ref([{
			name: '一级用户'
		},
		// {
		// 	name: '二级用户'
		// }
	])
	onLoad((options) => {
		if (options.status) {
			currentActive.value = Number(options.status)
		}
	})
	onShow(() => {
		userInfo.value = handleCache.get('userInfo')
		initData()
	})
	onReachBottom(() => {

		loadData()
	})
	let timeForMat = computed(() => {
		return function(val) {
			console.log(val, 8888)
			return dayjs.unix(val).format('YYYY-MM-DD HH:mm:ss')
		}
	})
	const dataList = ref([])
	const initData = () => {
		currentPage.value = 1
		let req = {
			uid: userInfo.value.id,

			pageNo: currentPage.value,
			pageSize: 30,
		}
		uni.showLoading({
			title: '加载中'
		})
		if (currentActive.value === 0) {
			commonApi.tjyj(req).then((res) => {
				uni.hideLoading()
				totalPage.value = res.data.totalPage || 0
				dataList.value = res.data.list || []
				if (totalPage.value > currentPage.value) {
					loadStatus.value = 'loadmore'
				} else {
					loadStatus.value = 'nomore'
				}
			})
		} else {
			commonApi.tjej(req).then((res) => {
				uni.hideLoading()
				totalPage.value = res.data.totalPage || 0
				dataList.value = res.data.list || []
				if (totalPage.value > currentPage.value) {
					loadStatus.value = 'loadmore'
				} else {
					loadStatus.value = 'nomore'
				}
			})
		}

	}
	const loadData = () => {

		if (currentPage.value >= totalPage.value) return;
		loadStatus.value = 'loading'
		currentPage.value = ++currentPage.value

		let req = {
			uid: userInfo.value.id,

			pageNo: currentPage.value,
			pageSize: 30,
		}
		uni.showLoading({
			title: '加载中'
		})
		if (currentActive.value === 0) {
			commonApi.tjyj(req)(req).then((res) => {
				uni.hideLoading()
				dataList.value = [...dataList.value, ...res.data.list]
				if (totalPage.value > currentPage.value) {
					loadStatus.value = 'loadmore'
				} else {
					loadStatus.value = ' nomore'
				}
			})
		} else {
			commonApi.tjej(req)(req).then((res) => {
				uni.hideLoading()
				dataList.value = [...dataList.value, ...res.data.list]
				if (totalPage.value > currentPage.value) {
					loadStatus.value = 'loadmore'
				} else {
					loadStatus.value = ' nomore'
				}
			})
		}


	}
	const handleChageTab = (data) => {
		currentActive.value = data.index
		initData()
	}
</script>

<style lang="scss" scoped>
	.inner {
		padding: 30rpx 24rpx;

		.have {
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 30rpx;

				.left {
					display: flex;
					align-items: center;

					.logo {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						overflow: hidden;

						.img {
							display: block;
							width: 100%;
							height: 100%;
						}
					}

					.name {
						margin-left: 20rpx;
					}
				}

				.right {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.none {
			padding-top: 10vh;
		}
	}
</style>